<template>
  <Modal v-model="modal"   title="批量添加部位" :closable="false"
   @on-ok="handleComfirm"
   ok-text="提交"
   @on-cancel="handleCancel('formItem')">
    <Form ref="formItem" :model="formItem" :label-width="80">
     <Row>
        <Col span="12">
        <FormItem label="类型">
            <Select v-model="formItem.model" ref="select" @on-change="selectRootType(formItem.model)" filterable>
                <Option v-for="item in allTypes" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
        </FormItem>
        </Col>
        <Col span="12">
        <FormItem label="部位">
             <Input v-model="formItem.input" disabled placeholder="Enter something..."></Input>
        </FormItem>
        </Col>
    </Row>
    <Row>
    <Col span="24" v-show="showTable">
        <div style="margin-left:80px">
            <Table border ref="selection" :columns="columns" :data="secondList">
              <template #code="{ row,index }">
                  <Input @on-blur="setCurrentCode(row.code,index)" v-model="row.code" />
              </template>
              <template #after="{ row,index }">
                  <Input @on-blur="setCurrentAfter(row.after,index)" v-model="row.after" />
              </template>
              <template #name="{ row }">
                  <Input disabled v-model="row.name" />
              </template>
              <template #prefix="{ row }">
                  <Input disabled v-model="row.prefix" />
              </template>
              <template #num="{ row,index }">
                  <Input  @on-blur="setCurrentNum(row.num,index)" v-model="row.num" />
              </template>
              <template #sort="{ row,index }">
                  <Select v-model="row.sort" placeholder="" @on-change="setFirstSort(index,row.sort)">
                    <Option
                      v-for="(item, index) of sortList"
                      :value="item"
                      :key="index"
                      >{{ item }}</Option
                    >
                  </Select>
              </template>
            </Table>
        </div>
     </Col>
    </Row>
    </Form>
  </Modal>
</template>

<script>
import apiObj from '@/api/project-partition.js';

export default {
  props: {
    title: String,
    nodeId: Number,
    levelTypeId: Number | String
  },
  data () {
    return {
      modal: false,
      formItem: {
        model: '',
        input: '部位工程'
      },
      firstType: '',
      allTypes: [],
      sortList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          align: 'center',
          width: 60,
          title: '层级',
          key: 'level'
        },
        {
          align: 'center',
          width: 88,
          title: '类型',
          key: 'type'
        },
        {
          align: 'center',
          width: 140,
          title: '编码',
          key: 'code',
          slot: 'code'
        },
        {
          width: 140,
          align: 'center',
          title: '后缀名',
          key: 'after',
          slot: 'after'
        },
        {
          width: 200,
          align: 'center',
          title: '名称',
          key: 'name',
          slot: 'name'
        },
        {
          width: 90,
          title: '上级编号',
          align: 'center',
          key: 'prefix',
          slot: 'prefix'
        },
        {
          width: 80,
          align: 'center',
          title: '编号',
          key: 'num',
          slot: 'num'
        },
        {
          align: 'center',
          width: 80,
          title: '排序',
          key: 'sort',
          slot: 'sort'
        }
      ],
      secondList: [
      ],
      showTable: false
    };
  },
  methods: {
    show () {
      this.modal = true;
    },
    hidden () {
      this.modal = false;
    },
    // 选择了当前分部的类型
    async selectRootType () {
      if (!this.$refs.select.values[0]) {
        return;
      }
      const { label, value } = this.$refs.select.values[0];
      this.secondList.push({ type: label });
      // this.secondList[0].type = label;
      this.firstType = label;
      this.showTable = true;
      const send = {
        nodeTypeId: 8, // 当前节点类型id
        pNodeTypeId: 6, // 父节点类型id
        pLevelTypeId: value // 父节点层级类型id
      };
      const res = await apiObj.selectFXGCList(send);
      this.getDefaultCode(res.data.data, value);
    },
    // 修改第index行的编码，
    setCurrentCode (value, index) {
      const current = this.secondList[index];
      current.code = value;
      current.name = current.code + current.after;
      this.$set(this.secondList, index, current);
      if (index === 0) {
        for (let i = 1; i < this.secondList.length; i++) {
          // this.secondList[i].code = Number(value) + i;
          this.secondList[i].code = value;
          // this.secondList[i].name = this.secondList[i].name + Number(value) + i;
          this.secondList[i].name = value + this.secondList[i].name;
        }
      }
    },
    // 修改第index行的编码，
    setCurrentAfter (value, index) {
      const current = this.secondList[index];
      current.after = value;
      current.name = current.code + current.after;
      this.$set(this.secondList, index, current);
    },
    // 修改第index行的编号
    setCurrentNum (value, index) {
      if (index === 0) {
        for (let i = 1; i < this.secondList.length; i++) {
          this.secondList[i].prefix = this.secondList[0].prefix + value;
        }
      }
    },
    // 获取当前层级下的所有类型选项
    async getInitTypeList () {
      // 此时的this.nodeId就是当前选择/点击的树节点，也就是批量新增节点的父节点。
      const send = { levelNameId: 6, parentId: this.nodeId };
      const resp = await apiObj.getSecondLevel(send);
      this.allTypes = resp.data.data;
    },
    // 获取子类型的编号，排序等
    async getDefaultCode (list, value) {
      const send = { nodeType: 8, parentId: this.nodeId };
      const resp = await apiObj.selectTonum(send);
      for (let i = 0; i < list.length; i++) {
        this.sortList.push(i + 1);
      }
      this.secondList = this.setFixTable(resp.data.data, list, value);
      console.log(this.secondList, '此时的sec纳思达');
    },
    setFirstSort (index, sort) {
      if (index === 0) {
        this.secondList[0].sort = sort;
      }
    },
    setFixTable (data, list, value) {
      const { code, prefix } = data;
      console.log(this.secondList, '111111111111');
      console.log(list, 'list');

      const first = {
        level: '分部',
        cj_type: value,
        type: this.firstType,
        code: this.secondList[0].code,
        after: '' + this.firstType,
        name: '' + this.firstType,
        prefix,
        num: this.secondList[0].num,
        sort: this.secondList[0].sort || 0
      };
      const next = list.map((item, index) => {
        return {
          level: '分项',
          type: item.name,
          cj_type: item.id,
          code: '',
          after: '' + item.name,
          name: '' + item.name,
          prefix: prefix,
          num: index + 1,
          sort: index + 1
        };
      });
      return [first, ...next];
    },
    // 批量添加节点接口
    async submintBatchAddTreeNode () {
      const send = this.settlePramaData();
      console.log('send=', send);
      const res = await apiObj.batchTreeNode(send);
      this.$emit('on-success');
    },
    // 整理批量新增节点参数数据
    settlePramaData () {
      return this.secondList.map((item, index) => {
        return {
          'cj_type': item.cj_type,
          'code': item.num,
          'nodeName': item.name,
          'nodeType': index === 0 ? 6 : 8,
          'parentId': index === 0 ? this.nodeId : '',
          'sort': item.sort
        };
      });
    },
    handleComfirm () {
      console.log('确认', this.secondList);
      this.submintBatchAddTreeNode();
      // this.$refs.tipModal.show();
    },
    handleCancel (form) {
      this.secondList = [];
      this.formItem.model = '';
      this.modal = false;
      this.showTable = false;
    },
    handleTipConfirm () {
      this.hidden();
      this.$refs.formItem.resetFields();
    },
    handleRefresh () {
      this.hidden();
      this.$refs.formItem.resetFields();
      this.$emit('on-refresh');
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ivu-modal{
    width:1050px!important;
}
/deep/ .ivu-modal-body {
    padding:30px;
    padding-left:0
}
/deep/ .ivu-table-border th,/deep/ .ivu-table-border td{
    border-right:none;
}
/deep/ .ivu-table-cell{
    padding-left:6px;
    padding-right:6px;
}
</style>
